<template>
    <div class="dialog-notice">
        <!-- default-expanded-keys:默认展开 -->
        <!-- default-checked-keys：默认选中 -->
        <el-dialog title="权限信息" :visible.sync="dialogVisible" width="30%" @close="handleClose">
            <el-tree show-checkbox ref="tree" highlight-current :data="treeData" :props="defaultProps" node-key="id"
                default-expand-all :default-checked-keys="checks" :check-strictly="false"></el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm" size="small">取 消</el-button>
                <el-button type="info" @click="submitForm" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'PermissionDialog',
    components: {

    },
    mixins: [],
    props: [],
    data() {
        return {
            dialogVisible: false,
            treeData: [],
            defaultProps: {
                children: 'childMenuList',
                label: 'menuName'
            },
            expanded: [],
            checks: [],
            roleId: ''
        }
    },
    computed: {
        ...mapState('userStore', ['menu'])
    },
    watch: {

    },
    mounted() {
        this.$bus.$on('permissionDialog', this.dialogShow)
        // this.$bus.$on('getForm', this.getForm)
        // 获取角色菜单信息
        this.$bus.$on('getRoleMenu', this.getRoleMenu)
    },
    methods: {
        // 获取角色菜单
        getRoleMenu(roleId) {
            this.roleId = roleId
            this.getAllRoleMenu()
            this.getCurrentRoleMenu(roleId)
        },
        handleClose() {
            this.form = {}
            this.checks = []
        },
        // 获取全部菜单
        getAllRoleMenu() {
            this.request.get(`/menu/menuList`).then(res => {
                if (res.code == 20000) {
                    this.treeData = res.data
                }
            })
        },
        // 获取当前角色的菜单
        getCurrentRoleMenu(roleId) {
            this.request.get(`/role/roleMenu/${roleId}`).then(res => {
                if (res.code == 20000) {
                    if (res.data.length == 0) {
                        this.checks = []
                    } else {
                        this.checks = res.data
                    }
                }
            })
        },
        submitForm() {
            // 保存角色菜单
            let roleId = this.roleId
            let menuIds = this.$refs.tree.getCheckedKeys()
            this.request.post(`/role/roleMenu/${roleId}`, menuIds).then(res => {
                if (res.code == 20000) {
                    // this.getCurrentRoleMenu(roleId)
                    this.$message({
                        type: 'success',
                        message: '权限分配成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '操作失败'
                    })
                }
            })
            this.dialogVisible = false
        },
        resetForm() {
            this.dialogVisible = false
        },
        dialogShow(value) {
            this.dialogVisible = value
        },

    }
};
</script>
<style lang='less' scoped>
.dialog-notice {
    background-color: aqua;

    .el-input__inner:focus {
        border-color: #11A983 !important;
        /* 使用!important确保覆盖 */
    }

    .upload-demo {
        .el-button--primary {
            color: white;
            background-color: #11A983;
        }
    }

    .el-tree {
        padding: 0 50px;
    }
}
</style>